﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Excel Like Slicer Usage</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            spread.isPaintSuspended(true);
            var sheet = spread.getActiveSheet();
            dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"];
            data = [
                ["bob", "NewYork", "1968/6/8", "man", "80", "180"],
                ["Betty", "NewYork", "1972/7/3", "woman", "72", "168"],
                ["Gary", "NewYork", "1964/3/2", "man", "71", "179"],
                ["Hunk", "Washington", "1972/8/8", "man", "80", "171"],
                ["Cherry", "Washington", "1986/2/2", "woman", "58", "161"],
                ["Eva", "Washington", "1993/2/15", "woman", "71", "180"]];
            sheet.addTableByDataSource("table1", 1, 1, data);
            var table = sheet.findTableByName("table1");
            table.setColumnName(0, dataColumns[0]);
            table.setColumnName(1, dataColumns[1]);
            table.setColumnName(2, dataColumns[2]);
            table.setColumnName(3, dataColumns[3]);
            table.setColumnName(4, dataColumns[4]);
            table.setColumnName(5, dataColumns[5]);

            var slicer0 = sheet.addSlicer("slicer1", "table1", "Height");
            slicer0.position(new GcSpread.Sheets.Point(30, 79));

            bindSlicerEvent(spread);
            spread.isPaintSuspended(false);

            $(".option-row").find("input").attr("disabled", true);
            $(".option-row").find("select").attr("disabled", true);
            $("#protect_sheet").attr("disabled", false);
            clearSlicerSetting();
        });

        function bindSlicerEvent(spread) {
            spread.bind(GcSpread.Sheets.Events.SlicerChanged, function (event, args) {
                var sheet = args.sheet;
                var slicer = args.slicer;
                if (!slicer) {
                    return;
                }
                var propertyName = args.propertyName;
                if (propertyName === "isSelected") {
                    if (slicer.isSelected()) {
                        $(".option-row").find("input").attr("disabled", false);
                        $(".option-row").find("select").attr("disabled", false);
                        initSlicerSetting(sheet, slicer);
                    }
                    else {
                        $(".option-row").find("input").attr("disabled", true);
                        $(".option-row").find("select").attr("disabled", true);
                        $("#protect_sheet").attr("disabled", false);
                    }
                }
            });

            var sheet = spread.getActiveSheet();
            // protect sheet
            $("#protect_sheet").bind("change", { "sheet": sheet }, function (e) {
                sheet.setIsProtected($(this).prop("checked"));
            });

            // slicer sort state
            $("#sort_state").bind("change", { "sheet": sheet }, function (e) {
                setSlicerProperty(e.data, "sortState", $("#sort_state>option:selected").text());
            });

            // lock slicer
            $("#lock_slicer").bind("change", { "sheet": sheet }, function (e) {
                setSlicerProperty(e.data, "isLocked", $(this).prop("checked"));
            });

            // slicer fixed position
            $("#fix_position").bind("change", { "sheet": sheet }, function (e) {
                setSlicerProperty(e.data, "fixedPosition", $(this).prop("checked"));
            });

            // slicer dynamic move and dynamic size
            $("#slicer_move_size").bind("change", { "sheet": sheet }, function (e) {
                $(this).prop("checked") && setSlicerProperty(e.data, "moveAndSize", true);
            });

            $("#slicer_move_no_size").bind("change", { "sheet": sheet }, function (e) {
                $(this).prop("checked") && setSlicerProperty(e.data, "moveAndNoSize", true);
            });

            $("#slicer_no_move_size").bind("change", { "sheet": sheet }, function (e) {
                $(this).prop("checked") && setSlicerProperty(e.data, "noMoveAndSize", true);
            });
        }

        function setSlicerProperty(data, property, value) {
            var sheet = data && data.sheet;
            if (!needChangeSlicer(sheet)) {
                return;
            }
            var selectedSlicers = getSelectedSlicers(sheet);
            for (var item in selectedSlicers) {
                var slicer = selectedSlicers[item];
                switch (property) {
                    case "sortState":
                        slicer.sortState(GcSpread.Sheets.SortState[value]);
                        break;
                    case "isLocked":
                        slicer.isLocked(value);
                        break;
                    case "fixedPosition":
                        slicer.fixedPosition(value);
                        break;
                    case "moveAndSize":
                        slicer.dynamicMove(true);
                        slicer.dynamicSize(true);
                        break;
                    case "moveAndNoSize":
                        slicer.dynamicMove(true);
                        slicer.dynamicSize(false);
                        break;
                    case "noMoveAndSize":
                        slicer.dynamicMove(false);
                        slicer.dynamicSize(false);
                        break;
                }
            }
        }

        function initSlicerSetting(sheet, slicer) {
            $("#sort_state").val(slicer.sortState());
            $("#protect_sheet").prop("checked", sheet.isProtected);
            $("#lock_slicer").prop("checked", slicer.isLocked());
            $("#fix_position").prop("checked", slicer.fixedPosition());
            var dynamicMove = slicer.dynamicMove(),
                dynamicSize = slicer.dynamicSize();
            if (!dynamicMove) {
                $("#slicer_no_move_size").prop("checked", true);
            }
            if (dynamicMove && !dynamicSize) {
                $("#slicer_move_no_size").prop("checked", true);
            }
            if (dynamicMove && dynamicSize) {
                $("#slicer_move_size").prop("checked", true);            
            }
        }

        function clearSlicerSetting() {
            $("#sort_state").val(1);
            $("#protect_sheet").prop("checked", false);
            $("#lock_slicer").prop("checked", true);
            $("#fix_position").prop("checked", false);
            $("#slicer_move_size").prop("checked", true);
        }
        
        function getSelectedSlicers(sheet) {
            if (!sheet) {
                return null;
            }
            var slicers = sheet.getSlicers();
            if (!slicers || $.isEmptyObject(slicers)) {
                return null;
            }
            var selectedSlicers = [];
            for (var item in slicers) {
                var slicer = slicers[item];
                if (slicer.isSelected()) {
                    selectedSlicers.push(slicer);
                }
            }
            return selectedSlicers;
        }

        function needChangeSlicer(sheet) {
            if (!sheet) {
                return false;
            }
            var selectedSlicers = getSelectedSlicers(sheet);
            if (!selectedSlicers || selectedSlicers.length === 0) {
                return false;
            }
            return true;
        }
        /*code_end*/
    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 370px; border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <label for="sort_state" style="width:auto;">Sort State:</label>
                <select id="sort_state">
                    <option value="0">None</option>
                    <option value="1">Ascending</option>
                    <option value="2">Descending</option>
                </select>
            </div>
            <div class="option-row">
                <input type="checkbox" id="protect_sheet" />
                <label for="protect_sheet">Protect Sheet</label>
                <input type="checkbox" id="lock_slicer" checked />
                <label for="lock_slicer">Lock Slicer</label>
                <input type="checkbox" id="fix_position" />
                <label for="fix_position">Fix Position</label>
            </div>
            <div class="option-row">
                <input type="radio" name="dynamic_move_size" value="move_size" id="slicer_move_size" checked />
                <label for="slicer_move_size" style="display: inline-block;">Move and size with cells</label>
            </div>
            <div class="option-row">
                <input type="radio" name="dynamic_move_size" value="move_no_size" id="slicer_move_no_size" />
                <label for="slicer_move_no_size" style="display: inline-block;">Move and don't size with cells</label>
            </div>
            <div class="option-row">
                <input type="radio" name="dynamic_move_size" value="no_move_size" id="slicer_no_move_size" />
                <label for="slicer_no_move_size" style="display: inline-block;">Don't move and size with cells</label>
            </div>
        </div>
    </div>
</body>
</html>
